<template>
  <div class="home">
    <div class="swiper-container swiper-container-father">
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination swiper-pagination-father"></div>
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-father" :style="yhiden">
          <v-my></v-my>
        </div>
        <div class="swiper-slide swiper-slide-father" :style="yhiden">
          <v-find></v-find>
        </div>
        <div class="swiper-slide swiper-slide-father" :style="yhiden">
          <v-mv></v-mv>
        </div>
      </div>
    </div>
    <!-- 菜单 -->
    <i class="cd" @click="cd_click()" @touchmove.self></i>
    <div class="mune hide" @click.self="mune_click()" @touchmove.self.stop.prevent>
      <main class="mune_main">
        <div class="box">
          <div class="top" v-if="!user_flag">
            <p>登录网易云音乐</p>
            <p>手机电脑多端同步，尽享海量高品质音乐</p>
            <button @click="login()">立即登录</button>
          </div>
          <div class="user" v-if="user_flag">
            <div class="header">
              <img v-lazy="user_detail_data.profile.avatarUrl" alt />
            </div>
            <div class="foot">
              <span class="nickname">{{user_detail_data.profile.nickname}}</span>
              <span class="level">Lv.{{user_detail_data.level}}</span>
              <span class="signin">
                <i></i>
                <span>签到</span>
              </span>
            </div>
          </div>
          <div class="classify">
            <div v-for="(item,index) in classify_data" :key="index">
              <img v-lazy="item.src" alt />
              <p>{{item.info}}</p>
            </div>
          </div>
          <ul>
            <li class="hov" v-for="(item,index) in list_data" :key="index">
              <div class="left">
                <img v-lazy="item.src" alt />
              </div>
              <div class="right">
                <p>{{item.info}}</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="foot">
          <ul>
            <li v-for="(item,index) in foot_data" :key="index" @click="foot_click(index)">
              <div class="left">
                <img v-lazy="item.src" alt />
              </div>
              <div class="right">
                <p>{{item.info}}</p>
              </div>
            </li>
          </ul>
        </div>
      </main>
    </div>
    <v-foot-nav></v-foot-nav>
    <v-alert v-show="alert_flag" :msg="msg"></v-alert>
    <v-prompt v-show="prompt_flag" :prompt_msg="prompt_msg"></v-prompt>
    <v-song-check-pop v-show="!song_check_data.success" :message="song_check_data.message"></v-song-check-pop>
  </div>
</template>
<script>
import Swiper from "swiper";
import vFootNav from "@/components/foot_nav";
import vFind from "@/pages/find";
import vMy from "@/pages/my";
import vMv from "@/pages/mv";
import vSongCheckPop from "../components/song_check_pop";
import vAlert from "@/components/alert";
import vPrompt from "@/components/prompt";
import { mapState } from "vuex";
export default {
  components: {
    vFootNav,
    vFind,
    vSongCheckPop,
    vMy,
    vMv,
    vAlert,
    vPrompt
  },
  data() {
    return {
      nav_data: ["我的", "发现", "MV"],
      classify_data: [
        { src: require("../images/bju.png"), info: "我的消息" },
        { src: require("../images/bjq.png"), info: "我的好友" },
        { src: require("../images/bk0.png"), info: "个性换肤" },
        { src: require("../images/bjs.png"), info: "听歌识曲" }
      ],
      list_data: [
        { src: require("../images/bk3.png"), info: "演出" },
        { src: require("../images/bk2.png"), info: "商城" },
        { src: require("../images/bjw.png"), info: "附近的人" },
        { src: require("../images/bjh.png"), info: "口袋音乐" },
        { src: require("../images/bk4.png"), info: "定时停止播放" },
        { src: require("../images/bjk.png"), info: "音乐闹钟" },
        { src: require("../images/bjp.png"), info: "在线听歌免流量" },
        { src: require("../images/bjr.png"), info: "游戏推荐" },
        { src: require("../images/bjn.png"), info: "优惠劵" }
      ],
      foot_data: [
        { src: require("../images/bjx.png"), info: "夜间模式" },
        { src: require("../images/bjz.png"), info: "设置" },
        { src: require("../images/bjo.png"), info: "退出" }
      ],
      msg: "",
      alert_flag: false,
      prompt_msg: "",
      prompt_flag: false,
      user_flag: false,
      yhiden: {
        overflowY: "auto"
      }
    };
  },
  computed: {
    ...mapState("song_check", ["song_check_data"]),
    ...mapState("login_refresh", ["login_refresh_data"]),
    ...mapState("login_status", ["login_status_data"]),
    ...mapState("user_detail", ["user_detail_data"])
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.refresh();
    });
  },
  created() {
    this.$store.commit("song_check/setSongCheckData", {
      success: true,
      message: "歌曲加载中。。。"
    });
    this.refresh();
  },
  mounted() {
    var that = this;
    var mySwiper = new Swiper(".swiper-container-father", {
      initialSlide: 1,
      autoHeight: true, //高度随内容变化
      noSwiping: true,
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination-father",
        clickable: true,
        renderBullet: function(index, className) {
          return (
            '<span class="' +
            className +
            ' ripple">' +
            that.nav_data[index] +
            "</span>"
          );
        }
      }
    });
  },
  methods: {
    refresh() {
      this.$store
        .dispatch("login_refresh/getLoginRefreshData", {})
        .then(data => {
          if (data.code == 200) {
            this.$store
              .dispatch("login_status/getLoginStatusData", {})
              .then(data => {
                if (data.code == 200) {
                  let userId = data.profile.userId;
                  this.$store
                    .dispatch("user_detail/getUserDetailData", {
                      uid: userId
                    })
                    .then(data => {
                      this.user_flag = true;
                    });
                }
              });
          }
        });
    },
    cd_click() {
      $(".mune").removeClass("hide");
      setTimeout(() => {
        $(".mune").addClass("show");
      }, 200);
      this.yhiden.overflowY = "hidden";
    },
    mune_click() {
      event.stopPropagation();
      $(".mune").removeClass("show");
      $(".mune").addClass("hide");
      this.yhiden.overflowY = "auto";
    },
    login() {
      this.$router.push({ name: "LoginSelect" });
    },
    foot_click(index) {
      if (index == 2) {
        this.$store.dispatch("logout/getLogoutData", {}).then(
          data => {
            if (data.code == 200) {
              this.user_flag = false;
              this.mune_click();
            }
          },
          () => {
            this.msg = "退出失败，请重试！";
            this.alert_flag = true;
            setTimeout(() => {
              this.alert_flag = false;
            }, 3000);
          }
        );
      }
    }
  }
};
</script>

<style>
.home .swiper-pagination-father .swiper-pagination-bullet {
  border: 0;
  width: auto;
  height: auto;
  background: none;
  outline: none;
  margin: 0 0.3rem !important;
  color: #000;
  opacity: 0.5;
}
.home .swiper-pagination-father .swiper-pagination-bullet-active {
  font-weight: 900;
  font-size: 0.42rem;
  opacity: 1;
}
</style>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .hov {
    position: relative;
  }

  .hov:focus {
    outline: none;
  }

  .hov:after {
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    position: absolute;
    top: 0rem;
    left: 0rem;
    pointer-events: none;
    background-color: #666;
    background-repeat: no-repeat;
    background-position: 50%;
    opacity: 0;
    transition: all 0.5s;
  }

  .hov:active:after {
    opacity: 0.3;
    transition: 0s;
  }
  .hide {
    left: -100% !important;
  }
  .show {
    background-color: rgba($color: #000000, $alpha: 0.5) !important;
  }
  .mune {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 1001;
    width: 100%;
    transition: left 0.3s;
    main {
      height: 100%;
      width: 85%;
      background-color: #fff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .box {
        height: 100%;
        flex: 1;
        overflow-y: auto;
        margin-right: -0.1rem;
        ul {
          border-top: 0.01rem solid #eee;
          li {
            padding: 0 0.2rem;
            overflow: hidden;
            line-height: 1rem;
            background-color: #fff;
            .left {
              float: left;
              line-height: 1rem;
              margin: 0.24rem;
              img {
                width: 0.5rem;
              }
            }
            .right {
              float: left;
            }
          }
        }
        .classify {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 0 0.2rem;
          div {
            padding: 0.2rem;
            text-align: center;
            img {
              display: inline-block;
              width: 0.5rem;
            }
            p {
              font-size: 0.24rem;
              color: #333;
            }
          }
        }
        .user {
          padding: 0.3rem 0.4rem;
          .header {
            img {
              width: 1.2rem;
              border-radius: 50%;
            }
          }
          .foot {
            text-align: left;
            line-height: 1rem;
            overflow: hidden;
            .nickname {
              font-size: 0.38rem;
              color: #333;
            }
            .level {
              margin-left: 0.1rem;
              font-size: 0.24rem;
              font-weight: 900;
              color: #999;
              padding: 0 0.1rem;
              border-radius: 0.2rem;
              background-color: #eee;
            }
            .signin {
              margin-top: 0.2rem;
              display: inline-block;
              float: right;
              font-size: 0.28rem;
              font-weight: normal;
              color: #fff;
              padding: 0rem 0.1rem;
              border-radius: 0.5rem;
              line-height: 0.5rem;
              background-color: rgba(237, 73, 62, 1);
              i {
                background: url(../images/qod.png) no-repeat;
                background-size: 100% 100%;
                display: inline-block;
                width: 0.3rem;
                height: 0.3rem;
                vertical-align: middle;
              }
              span {
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
        }
        .top {
          padding-top: 0.3rem;
          p {
            font-size: 0.28rem;
            color: #666;
          }
          button {
            font-size: 0.32rem;
            color: #333;
            border: 0.012rem solid #ccc;
            border-radius: 1rem;
            padding: 0.05rem 0.5rem;
            margin: 0.5rem 0;
            background-color: #fff;
          }
        }
      }
      .foot {
        ul {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          li {
            overflow: hidden;
            .left {
              display: inline-block;
              vertical-align: middle;
              img {
                width: 0.5rem;
                padding: 0.2rem 0.05rem;
              }
            }
            .right {
              display: inline-block;
              vertical-align: middle;
              p {
                color: #333;
                font-size: 0.28rem;
              }
            }
          }
        }
      }
    }
  }
  .cd {
    position: fixed;
    top: 0.24rem;
    left: 0.28rem;
    background: url(../images/cd.png) no-repeat center;
    background-size: 60% 60%;
    width: 0.7rem;
    height: 0.6rem;
    display: inline-block;
    z-index: 100;
  }
  .swiper-container-father {
    flex: 1;
    width: 100%;
    position: static;
    overflow-y: auto;
    .swiper-wrapper {
      padding-top: 1rem;
      .swiper-slide-father {
        height: calc(100vh - 1rem);
        overflow-y: auto;
      }
    }
    .swiper-pagination {
      box-sizing: border-box;
      position: fixed;
      top: -1px;
      font-size: 0.32rem;
      padding: 0.2rem;
      bottom: auto;
      z-index: 10;
      background: #fff;
    }
  }
}
</style>